<template>
  <div>
    <p>用户名：{{ user.name }}</p>
    <p>计数：{{ count }} - 双倍计数：{{ doubleCount }}</p>
    <button @click="increment">计数+1</button>
    <button @click="handleLogin">登录</button>
  </div>
</template>

<script setup>
import { useStore, mapState, mapGetters, mapMutations, mapActions } from 'vuex';
const store = useStore();

// 映射 State 和 Getter
const { user, count } = mapState(['user', 'count']);
const { doubleCount } = mapGetters(['doubleCount']);

// 映射 Mutation 和 Action
const { INCREMENT } = mapMutations(['INCREMENT']);
const { login } = mapActions(['login']);

const increment = () => {
  INCREMENT(); // 提交 Mutation
};

const handleLogin = () => {
  login({ name: '张三' }).then((res) => {
    console.log(res); // 登录成功回调
  });
};
</script>